<!-- 图片文字链接 -->
<template>
  <div class="m-img-text">
    <a :href="renderValues.imgLink">
      <span class="m-it-img" :style="renderStyles">
      </span>
    </a>
    <a class="m-it-text fn__ellipsis" :href="renderValues.textLink">
      {{ renderValues.text }}
    </a>
  </div>
</template>

<script lang="ts" setup>
import {defineProps, reactive, withDefaults, watch, ref} from 'vue';

interface ImgTextLinkProps {
  imgLink: string,
  textLink: string,
  text: string,
  imgUrl: string
}

const props = withDefaults(defineProps<ImgTextLinkProps>(), {
  imgLink: '',
  textLink: '',
  text: '',
  imgUrl: ''
});
const renderValues: ImgTextLinkProps = reactive({
      imgLink: props.imgLink,
      textLink: props.textLink,
      text: props.text,
      imgUrl: props.imgUrl
    }),
    renderStyles = ref(`background-image: url(${renderValues.imgUrl})`);

watch(props, (n) => {
  Object.assign(renderValues, n);
})
</script>

<style lang="less" scoped>
.m-it-img {
  height: 20px;
  width: 20px;
  background-color: rgba(0, 0, 0, .02);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 3px 3px 3px 3px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.m-it-text {
  -webkit-font-smoothing: antialiased;
  font-family: Helvetica Neue, Luxi Sans, DejaVu Sans, Hiragino Sans GB, Microsoft Yahei, sans-serif, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
  margin-left: 10px;
}
</style>
